<template>
  <div class="product-list-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-box">
        <el-input
          v-model="searchValue"
          placeholder="搜索商品信息"
          clearable
          class="search-input"
          @keyup.enter.native="handleSearch">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch">
          </el-button>
        </el-input>
      </div>
      
      <div class="hot-search-tags">
        <span class="hot-title">热门搜索：</span>
        <el-tag
          v-for="(tag, index) in hotTags"
          :key="index"
          class="hot-tag"
          @click="handleTopicDetail(tag)">
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-list">
      <div 
        v-for="(item, index) in cgoods" 
        :key="index"
        class="product-item"
        @click="detailsClick(item.orderId)">
        
        <div class="product-image">
          <el-image
            :src="item.picture ? $store.state.imgShowRoad + '/file/' + item.picture : $store.state.imgShowRoad + '/file/wutu.gif'"
            fit="cover"
            class="product-img">
            <div slot="error" class="image-error">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        
        <div class="product-info">
          <div class="product-type">
            <el-tag 
              size="mini" 
              :type="item.type === 'goods' ? 'success' : 'warning'">
              {{ item.type === 'goods' ? '供' : '需' }}
            </el-tag>
          </div>
          
          <p class="product-content">
            {{ item.content }}
          </p>
          
          <div class="product-meta">
            <span class="product-price" v-if="item.price">
              <i class="price-icon">￥</i>{{ item.price }}
            </span>
            <span class="product-owner">
              {{ item.ownName }} | {{ item.createTime | formatTimer }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      hotTags: ['苹果', '新疆哈密瓜', '樱桃']
    };
  },
  filters: {
    formatTimer(value) {
      const date = new Date(value);
      const y = date.getFullYear();
      const MM = (date.getMonth() + 1).toString().padStart(2, '0');
      const d = date.getDate().toString().padStart(2, '0');
      const h = date.getHours().toString().padStart(2, '0');
      const m = date.getMinutes().toString().padStart(2, '0');
      return `${y}-${MM}-${d} ${h}:${m}`;
    }
  },
  props: {
    cgoods: {
      type: Array,
      required: true
    },
  },
  methods: {
    detailsClick(item) {
      this.$store.commit("updateOrderId", item);
      this.$router.push(`/home/details?orderId=${item}`).catch((err) => err);
    },
    handleSearch() {
      this.$emit('handleSearch', this.searchValue);
    },
    handleTopicDetail(val) {
      this.searchValue = val;
      this.handleSearch();
    }
  }
};
</script>

<style lang="less" scoped>
.product-list-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  
  .search-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    
    .search-box {
      margin-bottom: 10px;
      
      .search-input {
        width: 400px;
        
        /deep/ .el-input-group__append {
          background-color: #67C23A;
          color: white;
          border-color: #67C23A;
        }
      }
    }
    
    .hot-search-tags {
      .hot-title {
        color: #909399;
        font-size: 14px;
        margin-right: 10px;
      }
      
      .hot-tag {
        margin-right: 10px;
        cursor: pointer;
        background-color: #f0f9eb;
        color: #67C23A;
        border-color: #e1f3d8;
        
        &:hover {
          background-color: #e1f3d8;
        }
      }
    }
  }
  
  .product-list {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .product-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      background-color: #f5f7fa;
      
      .product-content {
        color: #67C23A;
      }
    }
    
    .product-image {
      width: 100px;
      height: 100px;
      margin-right: 20px;
      flex-shrink: 0;
      
      .product-img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      
      .image-error {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
        font-size: 30px;
      }
    }
    
    .product-info {
      flex: 1;
      
      .product-type {
        margin-bottom: 8px;
      }
      
      .product-content {
        margin: 0 0 10px;
        font-size: 15px;
        line-height: 1.5;
        color: #606266;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      
      .product-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .product-price {
          color: #F56C6C;
          font-weight: bold;
          font-size: 16px;
          
          .price-icon {
            font-size: 12px;
          }
        }
        
        .product-owner {
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }
}
</style>